import './index_PC.scss';
import React, { useEffect, useState, useRef } from "react";
import { chainsall, user_wallet_list, user_wallet_info } from '@/utils/mixin.ts'
import { Button, QRCode, Space, message } from 'antd';
import { ArrowLeftOutlined, CopyOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import Logo from '@/assets/photos/LogoLogin.png';
import txtLogin from '@/assets/photos/txtLogin.png';

const WalletsDetail = () => {
    const navigate = useNavigate();
    const text = JSON.parse(localStorage.getItem('detail')).address;
    const name = JSON.parse(localStorage.getItem('detail')).name;
    const Export = async () => {
        navigate('/dashboard/walletpassword');
    }

    // 复制
    const copyToClipboard = (text) => {
        const tempInput = document.createElement('input');
        tempInput.value = text;
        document.body.appendChild(tempInput);
        tempInput.select();
        tempInput.setSelectionRange(0, 99999);
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        message.success('复制成功');
      };
    return (
        <div className="walletsDetail">
            <div className="header">
                <Button type="text" className="goBackBtn" onClick={() => window.history.go(-1)} icon={<ArrowLeftOutlined style={{ fontSize: '26px' }} />}></Button>
            </div>
            <div className="content">
                <div className="logo">
                    <div className="img">
                        <img src={Logo} />
                        <img src={txtLogin} />
                    </div>
                    <div className="name">
                        <p>{name}</p>
                        <span>{text}</span>
                    </div>
                    <div className="copyBtn">
                        <Button onClick={() => {copyToClipboard(text)}} type="text" icon={<CopyOutlined />}></Button>
                    </div>
                </div>
                <div className="QRcode">
                    <span>仅支持接收 Ethereum 网络资产</span>
                    <Space direction="vertical" align="center">
                        <QRCode value={text || '-'} />
                    </Space>
                </div>
            </div>
            <div className="footer">
                <Button type="primary" htmlType="submit" onClick={() => {Export()}}>导出密钥</Button>
            </div>
        </div>
    )

}

export default WalletsDetail;